import Link from 'next/link'
import Image from 'next/image'

interface NewsItem {
  id: string
  title: string
  summary: string
  imageUrl: string
  publishDate: string
  category: string
}

// 模拟数据，实际项目中应该从API获取
const mockNews: NewsItem[] = [
  {
    id: '1',
    title: '热门新闻标题1',
    summary: '这是一段新闻摘要，描述了新闻的主要内容...',
    imageUrl: 'https://picsum.photos/300/200?random=1',
    publishDate: '2024-01-20',
    category: '科技'
  },
  {
    id: '2',
    title: '热门新闻标题2',
    summary: '这是另一段新闻摘要，描述了新闻的主要内容...',
    imageUrl: 'https://picsum.photos/300/200?random=2',
    publishDate: '2024-01-20',
    category: '财经'
  },
  // 可以添加更多模拟数据
]

export function HotNewsList() {
  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold mb-4">热门新闻</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {mockNews.map((news) => (
          <Link
            key={news.id}
            href={`/news/${news.id}`}
            className="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
          >
            <div className="relative h-48">
              <Image
                src={news.imageUrl}
                alt={news.title}
                fill
                className="object-cover"
              />
            </div>
            <div className="p-4">
              <span className="inline-block px-2 py-1 text-sm bg-blue-100 text-blue-800 rounded mb-2">
                {news.category}
              </span>
              <h3 className="text-xl font-semibold mb-2 line-clamp-2">
                {news.title}
              </h3>
              <p className="text-gray-600 text-sm line-clamp-3">
                {news.summary}
              </p>
              <div className="mt-4 text-sm text-gray-500">
                {news.publishDate}
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}